<template>
    <keep-alive :include="cachedViews">
        <!-- <div :is="currentView"></div> -->
        <div>
            <div class="app-container clearfix pageHeader">
                <div class="header fl">{{$route.meta.title}}</div>
            </div>
             <div class="app-container margin-content padding-content">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="报关单号">
                        <el-input change-on-select v-model="form.seqNo" placeholder="请输入报关单号">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doSearch">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="app-container margin-content padding-content">
                <!-- <div class="clearfix inline-wrapper">
    
                    <div class="fl" style="margin-right: 10px">
                        <el-input v-model="seqNo" placeholder="请输入报关单号"></el-input>
                    </div>
                    <div class="fl">
                        <el-button type="primary" :disabled="submitting" @click="onSubmit">查询</el-button>
                    </div>
                </div> -->
                <!-- <ve-pie :data="chartData" :extend="chartExtend" :settings="chartSettings" :legend-visible="false" :tooltip-visible="false"  :loading="loading"></ve-pie> -->
                <div style="height: 300px;">
                    <el-steps direction="vertical" :active="active" align-center process-status="wait">
                        <el-step title="" icon="el-icon-info">
                            <div slot="title">{{seqData.orderNum}}</div>
                        </el-step>
                        <el-step title="" icon="el-icon-time">
                            <i slot="icon" :class="['el-step__icon-inner', active > 1 ? 'el-icon-success': 'el-icon-time' ]"></i>
                            <div slot="title">{{seqData.declare}}</div>
                        </el-step>
                        <el-step title="" icon="el-icon-time">
                            <i slot="icon" :class="['el-step__icon-inner',active > 2? 'el-icon-success': 'el-icon-time' ]"></i>
                            <div slot="title">{{seqData.warehousing}}</div>
                        </el-step>
                        <el-step title="" icon="el-icon-time">
                            <i slot="icon" :class="['el-step__icon-inner',active > 3? 'el-icon-success': 'el-icon-time' ]"></i>
                            <div slot="title">{{seqData.examine}}</div>
                        </el-step>
                        <el-step title="放行" icon="el-icon-time">
                            <i slot="icon" :class="['el-step__icon-inner',active > 4? 'el-icon-success': 'el-icon-time' ]"></i>
                            <div slot="title">{{seqData.release}}</div>
                        </el-step>
                        <el-step title="结关" icon="el-icon-time">
                            <i slot="icon" :class="['el-step__icon-inner',active > 5? 'el-icon-success': 'el-icon-time' ]"></i>
                            <div slot="title">{{seqData.clearance}}</div>
                        </el-step>
                    </el-steps>
                </div>
            </div>
    
    
        </div>
    </keep-alive>
</template>

<script>
    import {
        getWayBillMonit,
    } from '@/api/inquiry'
    export default {
        name: 'inquiry',
        data() {
            return {
                submitting: false,
                active: 0,
                form: {
                    seqNo: ''
                },
                seqData: {
                    orderNum: '单号',
                    declare: '申报',
                    warehousing: '入库',
                    examine: '审核',
                    release: '放行',
                    clearance: '结关'
                }
            }
        },
        computed: {
            // currentView(){
            //   return this.view[this.index]
            // },
            cachedViews() {
                return this.$store.state.tagsView.cachedViews
            }
        },
        methods: {
            // tableResize() {
            //   const _height = 320
            //   this.scrollHeight = document.body.scrollHeight - _height
            //   window.onresize = () => {
            //     this.scrollHeight = document.body.scrollHeight - _height
            //   }
            // },
            getData() {
                let params = {
                    seqNo: this.form.seqNo
                }
                this.submitting = true
                getWayBillMonit(params).then((res) => {
                    // console.log(res.data)
                    this.loading = false
                    if (res.data.code === 200) {
                        let _data = res.data.data;
                        console.log(_data);
                        this.seqData.orderNum = `单号${_data.orderNum}`
                        this.seqData.declare = `申报${_data.declare}`
                        this.seqData.warehousing = `入库${_data.warehousing}`
                        this.seqData.examine = `审核${_data.examine}`
                        this.seqData.release = `放行${_data.release}`
                        this.seqData.clearance = `结关${_data.clearance}`
                        this.active = _data.status - 0;
                        console.log(this.active)
    
                    }
                    this.submitting = false
                })
            },
            doSearch() {
                this.getData()
            },
            resetForm() {
                this.form = {
                    seqNo: '',
                }
            }
        },
        created() {
            this.getData()
        },
    }
</script>
